import React from "react"
import styles from "./MyDetail.module.scss"
import { useLocation, useHistory } from "react-router-dom"
import { myFace } from "../../utils/interface"
const MyDetail: React.FC = () => {
    let location = useLocation()
    let history = useHistory()
    function goBack() {
        history.goBack()
    }
    function pushMyPhone() {
        history.push('/index/myPhone')
    }
    function setImage(){
        history.push('/index/head')
    }
    function pushMyName(){
        history.push("/index/myName")
    }
    return <div className={styles.wrap}>
        <header className='header'>
            <div className={styles.push} onClick={goBack}>
                {'<'}
            </div>
            <div className={styles.text}>
                我的资料
            </div>
        </header>
        <div>
            <div>我的头像</div>
            <div className={styles.img} onClick={setImage}><img src={(location.state as myFace).avatar} alt="" /><div className={styles.span}>{'>'}</div></div>
        </div>
        <div onClick={pushMyName}>
            <span>昵称</span>
            <span>{(location.state as myFace).nickname}</span>
        </div>
        <div onClick={pushMyPhone}>
            <span>手机号</span>
            <span>{(location.state as myFace).mobile}</span>
        </div>
        <div className={styles.out}>
            <button>退出登录</button>
        </div>
    </div>
}
export default MyDetail